import { useMemo } from "react";
function CommodityItem(props){
	// console.log(props)
	const { data,amountChange,removeCommodity,changeChecked } = props;
	const { id,name,price,amount } = data;
	// const totalPrice = price*amount;
	const totalPrice = useMemo(()=>{
		return price*amount
	},[price,amount]);
	
	return (
		<li>
			<input type="checkbox" onChange = { ({target})=>{
				changeChecked(id,target.checked)
			} } />
		  <button onClick = { () => {
				const nub = amount-1 >= 0 ? amount-1:0;
				if(nub === 0){
					// 为0的时候清空这项数据
					removeCommodity(id)
				}else{
					amountChange(id,nub)
				}						
			}} >-</button>
			<span>{amount}</span>
			<button onClick = {()=>{
				const nub = amount+1;
				amountChange(id,nub)
			}}>+</button>
		  {name}
		  单价为 ￥{price}
		  总价格:￥{totalPrice}				
		</li>
	)
}
export default CommodityItem